*{
            margin: 0;
            padding: 0;
        }
#blur{
    position: fixed;
    background-color: rgba(1,1,1,0.6);
    filter: blur(20px);
    z-index: 999998;
    width: 100%;
    height: 100%;
    display: none;
}
        #index_left{
            height: 100%;
            width: 20%;
            float: left;
        }
        #index_flag{
            height: 112px;
            width: 30%;
            position: relative;
            top: 25%;
            left: 76%;
            z-index: 100;
        }
        #index_flag > div{
            height: 21px;
            position: relative;
            margin-top: 24px;
            border-radius:0 10px 10px 0 ;
            color: #333333;
            text-decoration:none;
            font-weight:bold;
            cursor: pointer;
        }
        #main{
            height: 100%;
            width: 80%;
            background-color: #cccccc;
            float: left;
        }
        #main > div{
            height:100%;
            width: 100%;
        }
        #bg{
            width: 100%;
            height:100%;
            filter: blur(5px);
            position: absolute;
        }
        #customer > #search, #reserve > #search_res{
            width: 80%;
            height: 12%;
            margin: 0 auto;
            position: relative;
            top: 10%;
            background-color: rgba(0,0,0,0.4);

        }
        #customer > #search >div, #reserve > #search_res>div{
            float: left;
            margin-left: 104px;
            margin-top: 10px;
            font-size: 1.4em;
        }
        #name,#phone,#res_num,#res_phone{
            width: 320px;
            height: 36px;
            font-size: 1em;
        }
       #result{
            width: 80%;
            height: 78%;
            margin: 0 auto;
            position: relative;
            top: 10%;
            background-color: rgba(0,0,0,0.4);
        }
       #cus_list{
           width: 100%;
           height: 20%;

       }
        #info,#cus{
            width: 100%;
            height: 100%;
        }
        #info>p{
            margin-left: 120px;
            font-size: large;
            color: #333333;
        }
        #cus_item,#res_item,#reserve_item,#check_item,#room_item{
            border-collapse: collapse;
            width: 80%;
            background-color: #d4d4d4;
            margin: 0 auto;
            position: relative;
            top: 10%;
        }
        #res_list{
            width: 100%;
            height: 80%;
            margin: 0 auto;
            position: relative;
        }

        #reserve > #res_table,#reserve > #check_table{
            width: 80%;
            height: 76%;
            position: relative;
            top:10%;
            margin:  0 auto;
            background-color: rgba(0,0,0,0.4);
        }
        #recognize,#recognize2{
            display: none;
            position: fixed;
            margin:auto;
            left:142px;
            right:0;
            top:-2%;
            bottom:0;
            width: 360px;
            height: 200px;
            background-color: lightgrey;
            border-radius: 20px;
            z-index: 999999;
        }
        #recognize > p,#recognize2 > p{
            height: 36px;
            width: 68%;
            margin: 0 auto;
            margin-top: 30px;
        }
        #recognize > input ,#recognize2 > input {
            width: 47px;
            height: 30px;
            position: relative;
            margin-left: 40px;
            left: 100px;
        }

        #float,#add_staff{
            position:fixed;
            margin:auto;
            left:142px;
            right:0;
            top:-2%;
            bottom:0;
            width: 600px;
            height: 360px;
            background-color: lightgrey;
            border-radius: 20px;
            z-index: 999999;
        }
        #float > p,#add_staff > p{
            height: 36px;
            width: 68%;
            margin: 0 auto;
            margin-top: 14px;
        }
        #float > input,#add_staff > input{
            width: 60px;
            height: 46px;
            position: absolute;
        }
        #float  > p >input,#float  > p >select,#add_staff  > p >input,#add_staff  > p >select{
            width: 330px;
            height: 100%;
        }

        #room_search{
            width: 80%;
            height: 20%;
            margin: auto;
            position: relative;
            background-color: rgba(0,0,0,0.4);
            top: 50px;
            color: black;
        }
        #room_search > div{
            width: 33%;
            height:60px;
            float:left;
            position: relative;
            top: 42px;
            font-size: 1.2em;
        }
        #room_search > div > input{
            width: 70%;
            height:58%;
        }
        #get_room{
            background-color: #9a2423;
            font-size: 1em;
            color: whitesmoke;
            border: 0px;
            position: absolute;
            right: 160px;
        }
        #room_book{
            width: 80%;
            height: 74%;
            background-color: rgba(0,0,0,0.4);
            margin: 0 auto;
            position: relative;
            top: 50px;
        }
        #room_update{
            position: fixed;
            display: none;
            width: 600px;
            height: 300px;
            background-color: whitesmoke;
            z-index: 9999999;
            margin: auto;
            left: 0;
            right: 0;
            top:200px;
            border-radius: 20px;
        }
        #room_update>div{
            width: fit-content;
            height:40px;
            position: relative;
            top: 50px;
            margin: 0 auto;
        }
        #room_update>div>input,#room_update>div>select{
            width: 174px;
            height: 24px;
            margin-left: 30px;
        }
        #room_update>input{
            position: relative;
            top:72px;
            margin-left: 60px;
            left:88px;
        }